<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        /* 关键帧 */
        @keyframes ickt {

            /* 关键帧 */
            /* 第一帧 */
            0% {
                transform: translate(0, 0) scale(1) rotate(0);
            }

            /* 第二帧 */
            25% {
                transform: translate(300px, 150px);
            }

            /* 第三帧 */
            50% {
                transform: scale(3) rotate(360deg);
            }

            /* 第四帧 */
            75% {
                transform: translate(100px, 300px) scale(0.5);
            }

            /* 最后一帧 如果要循环播放，最后一帧通常与第一帧一样 */
            100% {
                transform: translate(0, 0) scale(1) rotate(0);
            }
        }

        /* 为img使用动画 */
        .demo {
            animation: ickt 4s linear 3s 3 reverse forwards;
        }


        /* 音乐播放器 光盘旋转动画制作 */
        @keyframes music {

            /* 开始相当于0% */
            from {
                transform: rotate(0);
            }

            /* 结束相当于100% */
            to {
                transform: rotate(360deg);
            }
        }

        /* 调用 */
        .music {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            animation: music 12s linear infinite;
            margin: 0 auto;
        }

        /* 定义关键帧 */
        @keyframes move {
            0% {
                transform: translate(0);
            }

            25% {
                transform: translate(750px) rotate(90deg);
            }
            50% {
                transform: translate(750px,550px) rotate(180deg);
            }
            75% {
                transform: translate(0,550px) rotate(270deg);
            }

            /*  要回到原来的位置 0% ，100%相同*/
            100% {
                transform: translate(0,0) rotate(360deg);
            }
        }

        .container {
            width: 800px;
            height: 600px;
            border: 2px solid rgb(71, 153, 71);
            margin: 0 auto;
        }

        .container .box {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgb(233, 161, 79);
            border: 2px solid rgb(241, 241, 36);
            /* 启动动画 */
            animation: move 10s forwards;
            font-size: 50px;
            line-height: 50px;
            color: #FFF;
            font-weight: 700;
            text-align: center;
        }
    </style>
</head>

<body>
    <img src="./image/daqiao.jpg" alt="" class="demo">
    <img src="./image/two.jfif" alt="" class="music">

    <div class="container">
        <div class="box">A</div>
    </div>
</body>

</html>